<style>
  /* 为了防止点击新增移动 */
  .categoryManage .option-div{
    /* border: 1px solid red; */
    height: 35px;
  }
  .dialog{
    position: absolute;
    /* 绝对定位 */
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    font-size: 18px;
    display: none;
    /* 默认隐藏 */
  }
.dialog-content{
  margin: 100px auto;
  width: 50%;
  /* height: 400px; */
  /* 有内容撑起 */
  background-color: #fff;
  border-radius: 10px;
  /* padding: 10px 20px; */
  padding-bottom: 10px;
}
.dialog-header{
  /* line-height: 30px; */
  overflow: hidden;
  /* 清除浮动 */
  background-color: #2cb5ac;
  padding: 10px 20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  color: #fff;
  font-size: 20px;
  margin-bottom: 20px;
}
.dialog-header .dialog-title{
  float: left;
}
.dialog-header .dialog-cancel{
  float: right;
}
.dialog-body{
  line-height: 40px;
}
.dialog-body .form-item{
  margin-bottom: 10px;
}
.dialog-body label{
  width: 80px;
  text-align: right;
  margin-right: 10px;
  display: inline-block;
  /* 行内元素设置宽高无效 */
}
.dialog-body input,.dialog-body textarea,.dialog-body select{
  width: calc(100% - 150px);
  font-size: 18px;
}
.dialog-body input,.dialog-body select{
  height: 30px;
}
.dialog-footer{
  text-align: right;
  /* margin-bottom: 10px; */
  padding-right: 10px;

}
</style>
<div class="categoryManage">
  <div class="option-div">
    <button class="btn btn-success" id="toAdd">新增</button>
  </div>
  <div class="table-div">
    <table class="table striped">
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>排序号</th>
          <th>父栏目</th>
          <th>描述</th>
          <th>操作</th>
        </tr>        
      </thead>
      <tbody>        
      </tbody>
    </table>
  </div>
  <!-- 模态框 -->
  <div class="dialog">
    <div class="dialog-content">
      <div class="dialog-header">
        <div class="dialog-title">
          新增栏目信息
        </div>
        <div class="dialog-cancel"><i class="fa fa-times"></i></div>
      </div>
      <div class="dialog-body">
        <div class="form-item">
          <label for="">栏目名称</label>
          <input type="text" name="name">
        </div>
        <div class="form-item">
          <label for="">父栏目</label>
          <select name="parentId" id="">
            <!-- 遍历生成 -->
            <option value="">请选择</option>
          </select>
        </div>
        <div class="form-item">
          <label for="">序号</label>
          <input type="text" name="no">
        </div>
        <div class="form-item">
          <label for="">栏目介绍</label>
          <textarea name="description" id="" cols="30" rows="4"></textarea>
        </div>
      </div>
      <div class="dialog-footer">
        <button class="btn btn-error">取消</button>
        <button class="btn btn-success">确定</button>
      </div>
    </div>
  </div>
</div>
<script>
  //数据模型  ——全局
  var categoryDataModel = {
    // 所有类别数据(栏目数据)
    categoryData: [],
    // 当前修改的对象
    currentCategory: {},
    // 模态框的标题
    dialogTitle: '新增分类信息',
  };

    //确定按钮保存或更新
    $('.dialog-footer button:last').click(()=>{
      //获取表单控件数据，进行保存操作
      //新增 4
      let params = {   //传递给后台
      id: categoryDataModel.currentCategory.id,
      name: $('[name=name]').val(),  //表单控件的val值
      description: $('[name=description]').val(),  //表单控件的val值
      no: $('[name=no]').val(),  //表单控件的val值
      parentId: $('[name=parentId]').val()   //表单控件的val值
    };
    // console.log(params, '--数据');
    myAjax.postForm(api.CATEGORY_SAVEORUPDATE, params).then((res) => {
      // console.log(res);   //保存成功
      // 局部刷新数据，关闭模态框
      findAll();
      $('.dialog').fadeOut();
    }).catch((err) => {
      // err在请求成功后台操作失败的时候是res。err在请求失败是err
      alert(err.message || '保存错误');
    })
  })

  //绑定事件——新增
  $('#toAdd').click(()=>{
    //标题 内容  option  显示模态框
    // 设置currentCategory清空
      //新增置空，修改放对象
    categoryDataModel.currentCategory = {};
    categoryDataModel.dialogTitle = '新增分类信息';
    changeDialogTitle();
  });
    // $('.dialog-title').text('新增分类信息');
    // //清空操作
    // $('[name=parentId]').empty();
    // $('[name=parentId]').append($(`<option value="">请选择</option>`));  //开单引号
    // // 遍历option
    // // 过滤一级栏目作为父栏目
    // // (item)=>{return item.name} ====> 简写  item=>item.name
    // let result=categoryDateModel.categoryDate.filter(item=>!item.parentId);
    // // console.log(result);
    // result.forEach(item=>{
    //   $('[name=parentId]').append($(`<option value="${item.id}">${item.name}</option>`));
    // });
    // categoryDateModel.categoryDate.forEach((item)=>{
    //          
    // })

    //显示模态框
    // $('.dialog').show();   无动画
    // $('.dialog').fadeIn();   //淡入c
    
    //模态框关闭
    $('.dialog-footer button:first').click(()=>{
      $('.fa-times').trigger('click');   //模拟触发
    });   //取消按钮
    $('.fa-times').click(()=>{
      $('.dialog').fadeOut();   //淡出
    });   //关闭
  
  //封装 处理模态框的标题 ，追加option  ,设置表单控件内容 ，显示模态框
  function changeDialogTitle(){
    $('.dialog-title').text(categoryDataModel.dialogTitle);
    //清空操作
    $('[name=parentId]').empty();
    $('[name=parentId]').append($(`<option value="">请选择</option>`));  //开单引号
    // 遍历option
    // 过滤一级栏目作为父栏目
    // (item)=>{return item.name} ====> 简写  item=>item.name
    let result=categoryDateModel.categoryDate.filter(item=>!item.parentId);
    // console.log(result);
    result.forEach(item=>{
      $('[name=parentId]').append($(`<option value="${item.id}">${item.name}</option>`));
    });    
      $('[name=name]').val(categoryDateModel.currentCategory.name);
      $('[name=parentId]').val(categoryDateModel.currentCategory.parentId);
      $('[name=no]').val(categoryDateModel.currentCategory.no);
      $('[name=description]').val(categoryDateModel.currentCategory.description);
      //显示模态框
      $('.dialog').fadeIn();
  }
  // console.log(1); 

  // 获取全部类别信息
  findAll();
  function findAll() {
  // myAjax.get("/category/findAll",null).then((res)=>{
  myAjax.get("/category/findAll",null).then((res)=>{
    console.log(api.CATEGORY_FINDALL);
    // 清空节点 tbody
    $('.categoryManage tbody').empty();
    //将数据设置到数据模型中
    // categoryDateModel.categoryDate=res.data;
    // console.log(res);
    let arr=res.data || [] ;
    if(arr.length>0){
      arr.forEach((item,index)=>{
        $('.categoryManage tbody').append($(`
          <tr>
            <td>${index+1}</td>
            <td>${item.name}</td>
            <td>${item.no}</td>
            <td>${item.parentId || '--'}</td>
            <td>${item.description || '--'}</td>
            <td>
              <i data-item='${JSON.stringify(item)}' class="fa fa-edit" title="编辑"></i>
              <i data-id='${item.id}' class="fa fa-trash-o" title="删除"></i>
            </td>          
          </tr>
        `));
        //  ``  es6模板字符串 `回车${name}`
      })
    }
  })
  }

  //绑定事件——编辑  事件代理
  $('.categoryManage tbody').on('click','.fa-edit',(e)=>{
      // console.log(e.target);
      let category = $(e.target).attr('data-item');
      // category = JSON.parse(category);
      //存到数据模型中，点击修改模态框的确定的时候，需要id
      categoryDateModel.currentCategory=JSON.parse(category);
      // category代表的是要修改的数据
      // console.log(category);  //JSON字符串

      //标题  option 
      // 设置currentCategory清空
      categoryDataModel.dialogTitle = '修改分类信息';
      changeDialogTitle();
      //内容  
        // $('[name=name]').val(category.name);
        // $('[name=parentId]').val(category.parentId);
        // $('[name=no]').val(category.no);
        // $('[name=description]').val(category.description);
      //显示模态框
        // $('.dialog').fadeIn();
  });

  //绑定事件——删除
  $('.categoryManage tbody').on('click','.fa-trash-o',(e)=>{
      // console.log(e.target);
      let id = $(e.target).attr('data-id');
      // id代表的是要修改的数据
      // console.log(id);  
      if (confirm('是否确认删除?')) {      //{id：id} ->简写{ id }
      myAjax.get(api.CATEGORY_DELETEBYID, { id }).then((res) => {
        alert('删除成功');     //右上角提示几秒后会消失
        findAll();
      }).catch((err) => {
        alert(err.message || "删除失败");
      })
    }
  });

  // 鼠标摁下移动与放开
  $('#toAdd').mousedown(() => {
    $('#toAdd').css({
      "margin-left": "2px",
      "margin-top": "2px"
    });
  })
  $('#toAdd').mouseup(() => {
    $('#toAdd').css({
      "margin-left": "0px",
      "margin-top": "0px"
    });
  })
</script>